import { DownOutlined } from '@ant-design/icons';
import { useState, forwardRef } from 'react';
import { Table } from '@arco-design/web-react';
import { Resizable } from 'react-resizable';
import { Tree, Space } from 'antd';
import './tongzhi.less';

const originColumns = [
    {
        title: '公告名称',
        dataIndex: 'title',
        width: 500,
    },
    {
        title: '是否公开',
        dataIndex: 'sta',
        width: 150,

    },
    {
        title: '接收人员',
        dataIndex: 'people',
        width: 120,

    },
    {
        title: '公告时间',
        dataIndex: 'day',
        width: 100,

    },
    {
        title: '创建人',
        dataIndex: 'person',
        width: 100,

    },
    {
        title: '操作',
        key: 'action',
        render: (_, record) => (
            <Space size="middle">
                <a>删除</a>
            </Space>
        ),
    },
];
const CustomResizeHandle = forwardRef((props, ref) => {
    const { handleAxis, ...restProps } = props;
    return (
        <span
            ref={ref}
            className={`react-resizable-handle react-resizable-handle-${handleAxis}`}
            {...restProps}
            onClick={(e) => {
                e.stopPropagation();
            }}
        />
    );
});

const ResizableTitle = (props) => {
    const { onResize, width, ...restProps } = props;

    if (!width) {
        return <th {...restProps} />;
    }

    return (
        <Resizable
            width={width}
            height={0}
            handle={<CustomResizeHandle />}
            onResize={onResize}
            draggableOpts={{
                enableUserSelectHack: false,
            }}
        >
            <th {...restProps} />
        </Resizable>
    );
};

const treeData = [
    {
        title: '通知公告',
        key: '1',
        children: [
            {
                title: '通知公告',
                key: '2',
                children: [
                    {
                        title: '会议纪要',
                        key: '3',
                    },
                    {
                        title: '奖惩通报',
                        key: '4',
                    },
                    {
                        title: '人事任免',
                        key: '5',
                    },
                    {
                        title: '规章制度',
                        key: '6',
                    },
                    {
                        title: '质量安全',
                        key: '7',
                    },
                    {
                        title: '放假通知',
                        key: '8',
                    },
                    {
                        title: '岗位竞聘',
                        key: '9',
                    }
                ],
            },
            {
                title: '知识管理',
                key: '10',
                children: [
                    {
                        title: '产品知识',
                        key: '11',
                    },
                    {
                        title: '技术知识',
                        key: '12',
                    },
                    {
                        title: '质量知识',
                        key: '13',
                    },
                    {
                        title: '营销知识',
                        key: '14',
                    },
                    {
                        title: '管理知识',
                        key: '15',
                    },
                    {
                        title: '培训资料',
                        key: '16',
                    },
                ],
            },
            {
                title: '企业文化',
                key: '20',
                children: [
                    {
                        title: '优秀员工',
                        key: '21',
                    },
                    {
                        title: '员工情怀',
                        key: '22',
                    },
                    {
                        title: '规章制度',
                        key: '23',
                    },
                    {
                        title: '大事记',
                        key: '24',
                    }
                ],
            },
        ],
    },
];
function App() {
    const [columns, setColumns] = useState(
        originColumns.map((column, index) => {
            if (column.width) {
                return {
                    ...column,
                    onHeaderCell: (col) => ({
                        width: col.width,
                        onResize: handleResize(index),
                    }),
                };
            }

            return column;
        })
    );
    let [done, setOne] = useState([
        { id: '1', sta: '是', person: 'zy', people: '无', title: '关于公司人事任免通知书', day: '2020.06.16' },
        { id: '2', sta: '是', person: 'zy', people: '无', title: '关于2020年春节放假的通知', day: '2020.06.16' },
        { id: '3', sta: '是', person: 'zy', people: '无', title: '关于最新的公司规章制度细节通知', day: '2020.06.16' },
        { id: '4', sta: '是', person: 'zy', people: '无', title: '公司内部招聘公告', day: '2020.06.16' },
        { id: '5', sta: '是', person: 'zy', people: '无', title: '关于开展《经济合同法》的相关培训', day: '2020.06.16' },
        { id: '6', sta: '是', person: 'zy', people: '无', title: '夏雪签署与光大公司的大订单，奖励3000元', day: '2020.06.16' },
        { id: '7', sta: '是', person: 'zy', people: '无', title: '关于六月份综合工作培训内容及相关注意事项通知', day: '2020.06.16' },
        { id: '8', sta: '是', person: 'zy', people: '无', title: '销售部招聘员工通知', day: '2020.06.16' },
        { id: '9', sta: '是', person: 'zy', people: '无', title: '关于各分公司培训会议的通知', day: '2020.06.16' },
    ])

    function handleResize(index) {
        return (e, { size }) => {
            setColumns((prevColumns) => {
                const nextColumns = [...prevColumns];
                nextColumns[index] = { ...nextColumns[index], width: size.width };
                return nextColumns;
            });
        };
    }

    const components = {
        header: {
            th: ResizableTitle,
        },
    };
    // 树
    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };

    //     selectedRowKeys,
    //     onChange: onSelectChange,
    //     selections: [
    //         Table.SELECTION_ALL,
    //         Table.SELECTION_INVERT,
    //         Table.SELECTION_NONE,
    //         {
    //             key: 'odd',
    //             text: 'Select Odd Row',
    //             onSelect: (changableRowKeys) => {
    //                 let newSelectedRowKeys = [];
    //                 newSelectedRowKeys = changableRowKeys.filter((_, index) => {
    //                     if (index % 2 !== 0) {
    //                         return false;
    //                     }
    //                     return true;
    //                 });
    //                 setSelectedRowKeys(newSelectedRowKeys);
    //             },
    //         },
    //         {
    //             key: 'even',
    //             text: 'Select Even Row',
    //             onSelect: (changableRowKeys) => {
    //                 let newSelectedRowKeys = [];
    //                 newSelectedRowKeys = changableRowKeys.filter((_, index) => {
    //                     if (index % 2 !== 0) {
    //                         return true;
    //                     }
    //                     return false;
    //                 });
    //                 setSelectedRowKeys(newSelectedRowKeys);
    //             },
    //         },
    //     ],
    // };
    // 左侧选中
    const onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);
    };
    // 单选
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    // 渲染
    return (
        <div className="tongzhi">
            <div className="tzleft">
                <Tree
                    showLine
                    defaultExpandAll
                    onSelect={onSelect}
                    treeData={treeData}
                    style={{ fontSize: '14px' }}
                />
            </div>
            <div className="tzright">
                <Table
                    className='table-demo-resizable-column'
                    components={components}
                    border
                    borderCell
                    columns={columns}
                    data={done}
                    pagination={false}
                    rowSelection={{
                        selectedRowKeys,
                        onChange: (selectedRowKeys, selectedRows) => {
                            console.log('onChange:', selectedRowKeys, selectedRows);
                            setSelectedRowKeys(selectedRowKeys);
                        },
                    }}
                />
            </div>
        </div>

    );
}

// 
export default App;